import {Image, ScrollView, Video, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/tabs.scss';
import giftImg from '@/assets/image/receiving/gift.png';
import icon1Img from '@/assets/image/receiving/icon_1.png';
import icon2Img from '@/assets/image/receiving/icon_2.png';
import icon3Img from '@/assets/image/receiving/icon_3.png';
import icon4Img from '@/assets/image/receiving/icon_4.png';
import icon5Img from '@/assets/image/receiving/icon_5.png';
import icon6Img from '@/assets/image/receiving/icon_6.png';
import illustrateImg from '@/assets/image/receiving/illustrate.png';
import bgImg1 from '../img/bg_1.png';
import bgImg2 from '../img/bg_2.png';
import bgImg3 from '../img/bg_3.png';
import bgImg4 from '../img/bg_4.png';
import './list.less';

type IPostProps = T.IProps & T.IPostProps;
//@ts-ignore
@connect<Partial<IPostProps>, T.IPostState>(store2Props, actions)
export default class post extends Component<Partial<IPostProps>, T.IPostState> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      clickLikeVal: false,
    };
  }

  componentDidMount() {}

  render() {
    let {
      main: {giftList},
      actions: {action},
    } = this.props;
    return (
      <View className="receivingGifts">
        <ScrollView className="scrollView" scrollY>
          {giftList.map((v, k) => {
            return (
              <View className="listBox">
                <View className="titleBox">
                  <View className="row">
                    <View>
                      <Image src={giftImg} mode="widthFix" className="giftImg" />
                    </View>
                    <View className="row">
                      <Text className="left">
                        {v.giftCate == 0 ? '每日' : v.giftCate == 1 ? '每周' : v.giftCate == 2 ? '每月' : v.giftName}
                        <Text className="right">礼包</Text>
                      </Text>
                    </View>
                    <View className="title">做任务领好礼</View>
                  </View>
                  <View>
                    <Image
                      src={illustrateImg}
                      mode="widthFix"
                      className="illustrateImg"
                      onClick={() => {
                        Taro.setStorageSync('giftsIntro', v.intro);
                        Taro.navigateTo({
                          url: '/pages/package-B/receiving-gifts/illustrate/index',
                        });
                      }}
                    />
                  </View>
                </View>
                <View className="list">
                  {v.list.map((v, k) => {
                    return (
                      <View
                        className="item"
                        style={{
                          backgroundImage: `url("${
                            v.type == 1
                              ? bgImg1
                              : v.type == 2
                              ? bgImg2
                              : v.type == 3
                              ? bgImg3
                              : v.type == 4
                              ? bgImg4
                              : bgImg4
                          }")`,
                        }}
                      >
                        <View>
                          <Image
                            src={
                              v.type == 1
                                ? icon1Img
                                : v.type == 2
                                ? icon2Img
                                : v.type == 3
                                ? icon5Img
                                : v.type == 4
                                ? icon3Img
                                : icon6Img
                            }
                            mode="widthFix"
                            className="icon"
                          />
                        </View>
                        <View className="right">
                          {(v.type == 3 || v.type == 4) && <View className="num">送{v.value}</View>}
                          <View className="name">{v.key}</View>
                        </View>
                      </View>
                    );
                  })}
                </View>
                {/* isFinish:是否可以领取,false活力值不够，true可以领取 */}
                {/* isDraw:是否领取,false未领取，true已领取 */}
                {!v.isFinish ? (
                  <View
                    className="btnBox"
                    onClick={() => {
                      Taro.navigateTo({
                        url: '/pages/package-A/taskCenter/index',
                      });
                    }}
                  >
                    去完成
                  </View>
                ) : v.isFinish && !v.isDraw ? (
                  <View
                    className="btnBox"
                    onClick={() => {
                      action.commonChange('main.giftName', v.giftName);
                      action.receive(v.giftId);
                    }}
                  >
                    立即领取
                  </View>
                ) : v.isDraw ? (
                  <View
                    className="btnBox disable"
                    onClick={() => {
                      action.commonChange('main.errorModel', true);
                    }}
                  >
                    已领取
                  </View>
                ) : (
                  ''
                )}
              </View>
            );
          })}
          {giftList.length <= 0 && (
            <View className="noneList">
              <Image
                src="https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/noneList.png"
                className="noneList-image"
              />
              暂无礼包
            </View>
          )}
        </ScrollView>
      </View>
    );
  }
}
